<template>
  <div class="tabs">
    <div
      class="tab-item"
      :class="{ active: currentTab === 'record' }"
      @click="$emit('changeTab', 'record')"
    >
      记一笔
    </div>
    <div
      class="tab-item"
      :class="{ active: currentTab === 'list' }"
      @click="$emit('changeTab', 'list')"
    >
      账单
    </div>
    <div
      class="tab-item"
      :class="{ active: currentTab === 'stats' }"
      @click="$emit('changeTab', 'stats')"
    >
      统计
    </div>
  </div>
</template>

<script setup>
defineProps({
  currentTab: {
    type: String,
    required: true
  }
})

defineEmits(['changeTab'])
</script>

<style scoped>
.tabs {
  display: flex;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  color: var(--text-secondary);
}

.tab-item.active {
  background: var(--primary-color);
  color: white;
}

.tab-item:hover:not(.active) {
  background: var(--bg-color);
}
</style>
